.container {
  border: 1px solid red;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .child1 {
  border: 1px solid red;
  width: 90vw;
  height: 90vh;
  display: flex;
}
.container .child1 .child2 {
  border: 1px solid blue;
  width: 10%;
}
.container .child1 .child3 {
  border: 1px solid blue;
  width: 90%;
  display: flex;
  flex-direction: column;
}
.container .child1 .child3 .child3header {
  background-color: aquamarine;
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-evenly;
}
.container .child1 .child3 .child3header .child3header1 {
  position: relative;
  background-color: red;
  width: 40%;
  box-sizing: border-box;
  display: flex;
}
.container .child1 .child3 .child3header .child3header1 .child3header1_1 {
  background-color: rosybrown;
  width: 40%;
  height: 40%;
}
.container .child1 .child3 .child3header .child3header1 .child3header1_2 {
  background-color: indigo;
  width: 40%;
  height: 40%;
}
.container .child1 .child3 .child3header .child3header1::before {
  margin-left: 15px;
  margin-right: 15px;
  content: '';
  width: 1px;
  height: 11px;
  background: wheat;
}
.container .child1 .child3 .child3header .child3header1::after {
  background: wheat;
  content: '';
  position: absolute;
  top: 40%;
  left: 10%;
  width: 0;
  height: 0;
  border-top: 10px solid blue;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.container .child1 .child3 .child3header .child3header2 {
  background-color: goldenrod;
  width: 40%;
}
.container .child1 .child3 .child3conenxt {
  background-color: aqua;
  width: 100%;
  height: 80%;
  transition: all 0.6s ease-in-out;
}
.container .child1 .child3 .child3conenxt.move {
  transform: translateX(100%);
}
